<template>
  <div style="padding: 10px">
    <el-table :data="tableData" v-loading="tableLoading" border stripe>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        fixed
      ></el-table-column>
      <el-table-column label="工单详情" align="center" width="180" fixed>
        <template slot-scope="scope">
          <div style="display: flex; flex-direction: column">
            <div>{{ scope.row.wrokId }}</div>
            <div>{{ scope.row.workAddTime }}</div>
            <div>{{ scope.row.productName }}</div>
            <div>{{ scope.row.wrokNum }}{{ scope.row.unit }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="percentage"
        label="进度"
        align="center"
        :width="scheduleWidth"
      >
        <template slot-scope="scope">
          <div style="width: auto; display: flex; align-items: center">
            <div
              v-for="(item, index) in scope.row.proWorkCrafts"
              :key="index"
              style="display: flex; align-items: center"
            >
              <div class="schedule-line">
                <el-progress
                  type="circle"
                  :status="item.percentage == 100 ? 'success' : null"
                  :width="80"
                  :percentage="parseFloat(item.percentage || 0)"
                  :show-text="false"
                ></el-progress>
                <div class="textCenter">
                  <div>{{ item.percentage }}%</div>
                  <span>{{ item.craftName }}</span>
                </div>
              </div>
              <div
                class="el-icon-right"
                v-if="index !== scope.row.proWorkCrafts.length - 1"
                style="margin: 0 10px"
              ></div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px"
      align="center"
      :hide-on-single-page="false"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="10"
      :total="total"
      :current-page="searchData.pageNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getScheduleListApi } from "@/api/schedule/schedule.js";

export default {
  components: {},
  data() {
    return {
      tableLoading: true,
      tableData: [],
      searchData: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      taskActive: 1,
      scheduleWidth: 0,
    };
  },
  created() {
    this.getScheduleList();
  },
  methods: {
    onClose() {
      this.dialogTableVisible = false;
    },
    // 查询进度中心
    async getScheduleList(page) {
      try {
        this.searchData.pageNum = page == null ? this.searchData.pageNum : page;
        const res = await getScheduleListApi(this.searchData);
        res.data.list.forEach((key1) => {
          key1.proWorkCrafts.forEach((key2) => {
            // 计算百分比
            // 良品+不良品/计划完成数量passNum+noPassNum/projectNum 保留小数点后一位小数
            if (Number(key2.projectNum) === 0) {
              // 如果总项目数为0
              key2.percentage = 0;
            } else {
              key2.percentage =
                ((Number(key2.passNum) + Number(key2.noPassNum)) /
                  Number(key2.projectNum)) *
                100;
              if (key2.percentage % 1 !== 0) {
                // 如果有小数点
                key2.percentage = key2.percentage.toFixed(1); // 保留一位小数
              } else {
                key2.percentage = parseInt(key2.percentage); // 转换为整数
              }
            }
            // console.log("良品", key2.passNum);
            // console.log("不良品", key2.noPassNum);
            // console.log("计划完成数量", key2.projectNum);
            // console.log("百分比", key2.percentage);
          });
        });
        // console.log(res.data.list);
        this.tableData = res.data.list;
        this.total = res.data.total;
        let maxCraftsNum = 0;
        this.tableData.forEach((key) => {
          if (key.proWorkCrafts.length > maxCraftsNum) {
            maxCraftsNum = key.proWorkCrafts.length;
          }
        });
        this.scheduleWidth = maxCraftsNum * 115;
      } catch (error) {
      } finally {
        this.tableLoading = false;
      }
    },
    //分页修改每页显示条数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getScheduleList();
    },
    //分页跳转页面
    handleCurrentChange(val) {
      this.searchData.pageNum = val;
      this.getScheduleList();
    },
  },
};
</script>

<style>
.schedule-line {
  position: relative;
}
.textCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.textCenter div {
  font-size: 12px;
  color: #1360fb;
  margin-bottom: 5px;
}
.textCenter span {
  font-size: 12px;
  color: #666;
  font-weight: 600;
}
</style>
